<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>书籍信息展示</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>
    <style>
        .layui-form-item{
            display: inline-block;
        }
        .layui-form-item #qqq{
            position: relative;
            top: -30px;
        }
        .layui-form-label{
            padding-left: 0;
        }
    </style>
</head>
<body>
<%--添加和修改的弹出框--%>
<div id="updateTypeDiv" style="display: none">
    <form class="layui-form" id="addForm" lay-filter="addForm">
        <input name="typeid" style="display: none">
        <br>
        <div class="layui-form-item">
            <label class="layui-form-label">书籍类型</label>
            <div class="layui-input-inline">
                <input type="text" name="typename" class="layui-input">
            </div>
        </div>
        <input name="count" style="display: none">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="updateBtnType">确认</button>
            </div>
        </div>
    </form>
</div>

<table id="test" class="layui-hide"  lay-filter="test" ></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button type="button" id="add" class="layui-btn layui-btn-radius" lay-event="insertAndUpdate">添加类型</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table','layer','form','jquery'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        //加载全部的类型信息
        function showtable(){
            table.render({
                elem: '#test'
                ,url: '${pageContext.request.contextPath}/type/queryAllType' //数据接口
                ,title: '书籍类型表'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,cols: [[ //表头
                    {field: 'typeid', title: '类型编号',  sort: true, hide:true},
                    {field: 'typename', title: '类型', align:'center',  sort: true},
                    {field: 'tcount', title: '书籍种类', align:'center', sort: true},
                    {fixed: 'right', title:'修改', align:'center', toolbar: '#barDemo'}
                ]]
                ,page: true //开启分页
                ,even: true //开启隔行背景
                ,limit:5//每页显示的条数
                ,limits:[2,5,10,15,20]
            });
        }

        //当页面整个加载完成时，执行的方法
        $(function(){
            showtable();
        })

        //updateBtnType表单提交事件--->提交按钮中  lay-filter的值
        form.on('submit(updateBtnType)', function(data){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/type/insertAndUpdate',
                data:data.field,//当前表单的所有数据
                dataType: 'json',
                success:function (data){

                    if(data.code=="100"){
                        layer.msg("书籍类型不能为空，操作失败！",{icon:5});
                    }else if(data.code=="200"){
                        layer.closeAll();
                        layer.msg("新增/修改成功",{icon:1});
                    }else if(data.code=="300"){
                        layer.msg("该类型已存在,操作失败！",{icon:5});
                    }else{
                        layer.closeAll();
                        layer.msg("操作失败",{icon:5});
                    }
                    showtable();
                },
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'insertAndUpdate':
                    $("#addForm")[0].reset();//点击新增之前先清空表单数据
                    layer.open({
                        type: 1
                        ,title: '添加书籍类型'
                        //,area: ['390px', '260px']
                        ,shade: 0
                        ,amin:3
                        ,maxmin: true
                        ,content: $('#updateTypeDiv')
                    });
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                $("#addForm")[0].reset();
                layer.open({
                    type: 1 //此处以iframe举例
                    ,title: '修改书籍类型'
                    ,maxmin: true
                    ,anim: 4
                    ,content: $("#updateTypeDiv")
                });
                form.val("addForm",data);//将当前点击行的数据填充到表单
            }else if(obj.event === 'del'){
                layer.confirm('您确定要删除嚒？',function (index) {
                    $.ajax({
                        type:'post'
                        ,data:{"typeid":data.typeid,"tcount":data.tcount}
                        ,dateType:'json'
                        ,url:'${pageContext.request.contextPath}/type/delType'
                        ,success:function (data) {
                            if(data.code=="0001"){
                                layer.msg("删除成功",{icon:1});
                            }else if(data.code=="0002"){
                                layer.msg("该类型书籍种类不为0，删除失败",{icon:5});
                            }else{
                                layer.msg("删除失败",{icon:5});
                            }
                            showtable();
                        }
                    })
                })
            }
        });
    });
</script>
</body>
</html>
